import { useState, useEffect } from 'react';
import { Table, Space, Pagination } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import {queryRaffleUserAwardOrder} from "@/api";
import {AwardUserOrderVO} from "@/types/AwardUserOrderVO";

const columns = [
    {
        title: '奖品名称',
        dataIndex: 'awardTitle',
    },
    {
        title: '用户ID',
        dataIndex: 'userId',
    },
    {
        title: '奖品状态',
        dataIndex: 'awardState',
    },
    {
        title: '中奖时间',
        dataIndex: 'awardTime',
    },
];

function UserAwardOrderPage() {
    const [pagination, setPagination] = useState({
        sizeCanChange: true,
        showTotal: true,
        pageSize: 5,
        total: 100,
        current: 1,
        pageSizeChangeResetCurrent: true,
    });
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState< AwardUserOrderVO[]>([]);

    const fetchData = async(current :number, pageSize :number) =>{
        const queryParams = new URLSearchParams(window.location.search);
        const result = await queryRaffleUserAwardOrder(String(queryParams.get('userId')), Number(queryParams.get('activityId')),current,pageSize);
        const {code, info, data}: { code: string; info: string; data: AwardUserOrderVO[]} = await result.json();
        if(code != "0000") {
            window.alert("查询活动账户额度，接口调用失败 code:" + code + " info:" + info)
            return
        }
        setData(data);
    }

    useEffect(() => {
        fetchData(pagination.current, pagination.pageSize);
    }, []);


    // @ts-ignore
    function onChangeTable(pagination) {
        const { current, pageSize } = pagination;
        setLoading(true);
        setTimeout(() => {
            fetchData(current,pageSize);
            setPagination((pagination) => ({ ...pagination, current, pageSize }));
            setLoading(false);
        });
    }

    return (
        <Table
            loading={loading}
            columns={columns}
            data={data}
            pagination={pagination}
            onChange={onChangeTable}
        />
    );
}

export default UserAwardOrderPage;
